<template>
  <view>
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <text class="nav-back-icon">&lt;</text>
      </view>
      <view class="nav-title">编辑资料</view>
      <view class="nav-right">
        <text class="nav-icon">⋯</text>
        <text class="nav-divider">|</text>
        <text class="nav-icon">⊙</text>
      </view>
    </view>
    
    <view class="container">
      <view class="blue-bg"></view>
      <view class="floating">
      <!-- 1. 商家信息（输入框） -->
      <view class="card info-card">
        <view class="row">
          <text class="label">负责人：</text>
          <input class="input" v-model="form.contactName" placeholder="张大美" placeholder-style="color:#BFBFBF;font-size:26rpx;" />
        </view>
        <view class="row">
          <text class="label">身份证号码：</text>
          <input class="input" v-model="form.idNumber" placeholder="请输入身份证号" placeholder-style="color:#BFBFBF;font-size:26rpx;" />
        </view>
        <view class="row">
          <text class="label">手机号：</text>
          <input class="input" v-model="form.phone" placeholder="请输入手机号" placeholder-style="color:#BFBFBF;font-size:26rpx;" />
        </view>
        <view class="row">
          <text class="label">验证码：</text>
          <view class="input-wrap code-wrap">
            <input class="inner-input" v-model="form.smsCode" placeholder="输入验证码" placeholder-style="color:#BFBFBF;font-size:26rpx;" />
            <view class="code-link" @tap="onGetCode">获取验证码</view>
          </view>
        </view>
        <view class="row">
          <text class="label">店名：</text>
          <input class="input" v-model="form.storeName" placeholder="大美汽修店" placeholder-style="color:#BFBFBF;font-size:26rpx;" />
        </view>
        <view class="row">
          <text class="label label-wide">工商营业执照号码：</text>
          <input class="input" v-model="form.licenseNo" placeholder="请输入执照号" placeholder-style="color:#BFBFBF;font-size:26rpx;" />
        </view>
        <view class="row">
          <text class="label">经营区域：</text>
          <view class="select-input" @tap="toggleSelect">
            <text :class="['select-text', { 'placeholder': !form.region }]">{{ form.region || '请选择区域' }}</text>
            <text class="select-arrow">﹀</text>
            <view class="select-options" v-if="isSelectOpen">
              <view class="option-item" v-for="(item,idx) in regions" :key="idx" @tap.stop="selectRegion(item)">{{ item }}</view>
            </view>
          </view>
        </view>
        <view class="row">
          <text class="label">地址：</text>
          <input class="input" v-model="form.address" placeholder="请输入详细地址" placeholder-style="color:#BFBFBF;font-size:26rpx;" />
        </view>
      </view>

      <!-- 2. 商家简介 -->
      <view class="card section-card">
        <view class="section-title">商家简介</view>
        <textarea class="textarea" v-model="form.intro" placeholder="这里是简单的商家介绍" placeholder-style="color:#BFBFBF;font-size:26rpx;" maxlength="500" />
      </view>

      <!-- 3. 身份证正反面图片（叠加上传） -->
      <view class="card section-card">
        <view class="section-title">身份证正反面照片</view>
        <view class="uploader">
          <uni-file-picker fileMediatype="image" :limit="2" :image-styles="imageStyles" v-model="idList" :auto-upload="false"></uni-file-picker>
          <view class="delete-row" v-if="idList.length">

          </view>
        </view>
      </view>

      <!-- 4. 营业执照（叠加上传） -->
      <view class="card section-card">
        <view class="section-title">营业执照</view>
        <view class="uploader">
          <uni-file-picker fileMediatype="image" :limit="2" :image-styles="imageStyles" v-model="licenseList" :auto-upload="false"></uni-file-picker>
          <view class="delete-row" v-if="licenseList.length">

          </view>
        </view>
      </view>

      <!-- 5. 门店照片（叠加上传） -->
      <view class="card section-card">
        <view class="section-title">门店照片</view>
        <view class="uploader">
          <uni-file-picker fileMediatype="image" :limit="2" :image-styles="imageStyles" v-model="storeList" :auto-upload="false"></uni-file-picker>
          <view class="delete-row" v-if="storeList.length">

          </view>
        </view>
      </view>

      <!-- 6. 营业时间 -->
      <view class="card section-card">
        <view class="section-title">营业时间</view>
        <view class="time-section">
          <view class="time-row">
            <text class="time-label">开始时间：</text>
            <picker mode="time" :value="businessHours.startTime" @change="onStartTimeChange">
              <view class="time-picker">
                <text class="time-text">{{ businessHours.startTime || '请选择开始时间' }}</text>
                <text class="time-arrow">﹀</text>
              </view>
            </picker>
          </view>
          <view class="time-row">
            <text class="time-label">结束时间：</text>
            <picker mode="time" :value="businessHours.endTime" @change="onEndTimeChange">
              <view class="time-picker">
                <text class="time-text">{{ businessHours.endTime || '请选择结束时间' }}</text>
                <text class="time-arrow">﹀</text>
              </view>
            </picker>
          </view>
        </view>
      </view>

      <!-- 7. 店铺状态 -->
      <view class="card section-card">
        <view class="section-title">店铺状态</view>
        <view class="status-section">
          <view class="status-row">
            <text class="status-label">营业状态：</text>
            <view class="status-content">
              <switch :checked="isOpen" @change="onStatusChange" class="status-switch" color="#1f78ff" />
             
            </view>
          </view>
        </view>
      </view>

      <!-- 底部保存按钮 -->
      <view class="bottom-btn" @tap="onSave">保存</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        contactName: '',
        idNumber: '',
        phone: '',
        smsCode: '',
        storeName: '',
        licenseNo: '',
        region: '',
        address: '',
        intro: ''
      },
      businessHours: {
        startTime: '09:00',
        endTime: '18:00'
      },
      isOpen: true,
      regions: ['焦作市山阳区', '郑州市金水区', '开封市鼓楼区', '洛阳市涧西区'],
      isSelectOpen: false,
      imageStyles: { width: 120, height: 90, border: { radius: 10 } },
      idList: [
        { url: '/static/身份证正面.jpg', extname: 'jpg', name: '身份证正面.jpg' },
        { url: '/static/身份证反面.jpg', extname: 'jpg', name: '身份证反面.jpg' }
      ],
      licenseList: [{ url: '/static/营业执照.jpg', extname: 'jpg', name: '营业执照.jpg' }],
      storeList: [{ url: '/static/门店照片.jpg', extname: 'jpg', name: '门店照片.jpg' }]
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateTo({
        url: '/fk/MerchantProfile/index'
      });
    },
    onGetCode() {
      // 模拟发送验证码
      uni.showToast({ title: '验证码已发送', icon: 'none' })
    },
    toggleSelect() {
      this.isSelectOpen = !this.isSelectOpen
    },
    selectRegion(name) {
      this.form.region = name
      this.isSelectOpen = false
    },
    removeFrom(listKey, index) {
      this[listKey].splice(index, 1)
    },
    onSelect() {},
    onDelete() {},
    onSave() {
      uni.showToast({ title: '已保存', icon: 'success' })
    },
    // 开始时间选择
    onStartTimeChange(e) {
      this.businessHours.startTime = e.detail.value;
    },
    // 结束时间选择
    onEndTimeChange(e) {
      this.businessHours.endTime = e.detail.value;
    },
    // 店铺状态切换
    onStatusChange(e) {
      this.isOpen = e.detail.value;
    }
  }
}
</script>

<style scoped>
/* 导航栏样式 */
.nav-bar {
  height: 120rpx;
  background: #1f78ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  z-index: 1000;
  box-sizing: border-box;
}

.nav-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.nav-left:active {
  transform: scale(0.95);
}

.nav-back-icon {
  color: #ffffff;
  font-size: 60rpx;
  font-weight: 200;
  line-height: 1;
}

.nav-title {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 500;
  padding-left: 40rpx;
  flex: 1;
  text-align: center;
}

.nav-right {
  display: flex;
  align-items: center;
  background: rgba(1, 1, 1, 0.2);
  border-radius: 50rpx;
  padding: 10rpx 20rpx;
  gap: 16rpx;
}

.nav-icon {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 600;
}

.nav-divider {
  color: #ffffff;
  font-size: 20rpx;
  opacity: 0.8;
}

.container { position: relative; min-height: 100vh; background-color: #f5f5f5;  }
.blue-bg { width: 100%; height: 300rpx; background: #1f78ff; }
.floating { position: absolute; top: 20rpx; left: 50%; transform: translateX(-50%); width: 94%; }
.card { background-color: #ffffff; border-radius: 20rpx; box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.1); padding:  32rpx; box-sizing: border-box; }
.info-card { margin-bottom: 24rpx; }
.row { display: flex; align-items: center; margin-bottom: 20rpx; }
.label { font-size: 24rpx; color: #333333; font-weight: 600; min-width: 220rpx; }
.label-wide { min-width: 220rpx; }
.input { flex: 1; height: 72rpx; line-height: 72rpx; padding: 0 24rpx; border: 2rpx solid #e9e9e9; border-radius: 36rpx; background-color: #ffffff; font-size: 26rpx; color: #333333; }
.input-wrap { flex: 1; height: 72rpx; border: 2rpx solid #e9e9e9; border-radius: 36rpx; background: #fff; display: flex; align-items: center; padding: 0 16rpx; box-sizing: border-box; }
.inner-input { flex: 1; height: 100%; line-height: 72rpx; padding: 0 8rpx; font-size: 26rpx; color: #333; }
.code-wrap { position: relative; }
.code-divider { width: 2rpx; height: 36rpx; background: #e6e6e6; margin: 0 12rpx; }
.code-link { color: #1677ff; font-size: 26rpx; white-space: nowrap; }
.inline-group { flex: 1; display: flex; align-items: center; }
.divider { display:none; }
.code-btn { display:none; }
.input-with-code { position: relative; padding-right: 200rpx; }
.code-link { position: absolute; right: 40rpx; top: 50%; transform: translateY(-50%); color: #1677ff; font-size: 26rpx; padding-left: 16rpx; border-left: 5rpx solid #e5e5e5; }
.select-input { flex: 1; height: 72rpx; border: 2rpx solid #e9e9e9; border-radius: 36rpx; background: #fff; padding: 0 24rpx; box-sizing: border-box; position: relative; display: flex; align-items: center; }
.select-text { flex: 1; font-size: 26rpx; color: #333; }
.select-text.placeholder { color: #BFBFBF; }
.select-arrow { position: absolute; right: 24rpx; color: #9e9e9e; }
.select-options { position: absolute; top: 80rpx; left: 0; right: 0; background: #fff; border: 2rpx solid #e9e9e9; border-radius: 16rpx; z-index: 10; box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.08); }
.option-item { padding: 20rpx 24rpx; font-size: 26rpx; color: #333; }
.option-item + .option-item { border-top: 2rpx solid #f2f2f2; }
.option-item:active { background: #f5f7fa; }
.section-card { margin-top: 24rpx; }
.section-title { font-size: 26rpx; color: #666666; margin-bottom: 20rpx; font-weight: 600; }
.textarea { width: 100%; min-height: 180rpx; padding: 20rpx 24rpx; border: 2rpx solid #e9e9e9; border-radius: 16rpx; background-color: #f9fafb; font-size: 26rpx; color: #333; box-sizing: border-box; }
.photos-row { display: flex; justify-content: flex-start; gap: 12rpx; }
.uploader { display: flex; flex-direction: column; align-items: flex-start; }
.delete-row { display: flex; gap: 12rpx; margin-top: 8rpx; }
.del { font-size: 24rpx; color: #666666; }
/* 营业时间样式 */
.time-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.time-label {
  font-size: 26rpx;
  color: #666666;
  min-width: 140rpx;
  text-align: left;
}

.time-picker {
  width: 200rpx;
  height: 72rpx;
  border: 2rpx solid #e9e9e9;
  border-radius: 36rpx;
  background: #fff;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.time-text {
  font-size: 26rpx;
  color: #333333;
  flex: 1;
}

.time-arrow {
  color: #9e9e9e;
  font-size: 20rpx;
}

/* 店铺状态样式 */
.status-section {
  display: flex;
  flex-direction: column;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.status-label {
  font-size: 26rpx;
  color: #666666;
  text-align: left;
  min-width: 140rpx;
}

.status-content {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.status-switch {
  transform: scale(0.8);
}

.status-text {
  font-size: 26rpx;
  color: #333333;
  font-weight: 500;
}

.bottom-btn { width: 70%; height: 88rpx; line-height: 88rpx; text-align: center; color: #ffffff; font-size: 30rpx; border-radius: 44rpx; background: linear-gradient(90deg, #3d7eff 0%, #1677ff 100%); box-shadow: 0 12rpx 32rpx rgba(22,119,255,.35); margin: 40rpx auto 20rpx; }
</style>